<template>
    <div class="elWrapper">
        <h3>示例</h3>
        <!-- 父子表格 上下布局-->
        <ParentChildTemplate 
            :tableParams="tableParams"
            :queryParams="queryParams"
            :childTableParams="childTableParams"
            :buttonsChild="buttonsChild"
            @saveHandler="saveHandler"
            @formCommHandler='formCommHandler'
            @delHandler$before='delHandler$before'
            @delHandler$after='delHandler$after'
            @childSaveHandler='childSaveHandler'
            @childDelHandler$before='childDelHandler$before'
            @childDelHandler$after='childDelHandler$after'
        >   
            注释：主表操作列自定义
            <template #table_before_son></template>
            <template #table_after_son>
                <el-table-column align="center" label="操作" width="150" :resizable="false">
                    <template slot-scope="scope">
                        <el-button class="edit-bgc" icon="el-icon-edit" @click="lookHandle(scope.row)">预览</el-button>
                    </template>
                </el-table-column>
            </template>
            注释：子表格操作列自定义同理 childTable_before_son childTable_after_son
            注释：搜索/表单自定义格式同理 table_before_son
        </ParentChildTemplate> 
        <div class="markdown-body">
            <parentChildTemplateMD></parentChildTemplateMD>
        </div>
    </div>   
</template>
<script>
import {queryApi, fileUpload, fileUploadvideo} from '@/api/api'
import ParentChildTemplate from '@/components/parentChildTemplate'
import parentChildTemplateMD from "../md/parentChildTemplateMD.md"
export default {
    name: "Home",
    components: {
        ParentChildTemplate,
        parentChildTemplateMD
    },
    data() {
      return {
            //查询区域数据
            queryParams: {
                maxHeight:'50px',
                // 搜索元素渲染
                searchRender: [
                    { field: 'name', label: '姓名', type: '$input', placeholder: '请输入昵称', span:6},
                    { field: 'role', label: '角色', type: '$input', placeholder: '请输入角色', span:6, disabled:true},
                    { field: 'sex', label: '性别', type: '$select', placeholder: '请选择性别', span:6, options: [{ label: '男', value: '0' }, { label: '女', value: '1' }]},
                    { field: 'age', label: '年龄', type: '$input', placeholder: '请输入年龄', span:6},
                    { field: 'flag1', label: '是否单身', type: '$radio', span:6, options: [{ label: '是', value: 'Y' }, { label: '否', value: 'N' }] },
                    { field: 'single', label: '是否出库', type: '$checkbox', span:6},
                    { field: 'num', label: '数字', type: '$input', validate: 'number', placeholder: '请输入数值', span:6 },
                    { field: 'date', label: '日期', type: '$date', datetype: 'daterange', format: 'yyyy-MM-dd', valueformat: 'yyyy-MM-dd', validate: 'date', placeholder: '请选择日期', span:6, rangeSeparator: '至', startPlaceholder: '开始日期', endPlaceholder: '结束日期'
                    },
                    { field: 'date', label: '日期', type: '$date', datetype: 'date', format: 'yyyy-MM-dd', valueformat: 'yyyy-MM-dd', validate: 'date', placeholder: '请选择日期', span:6, pickerOptions:'pickerOptions'},
                    // { field: 'checkedList', label: '爱好', visibleMethod: this.visibleMethod, type: '$checkboxs', span:24, options: [{ label: '运动、跑步', value: '1' }, { label: '听音乐', value: '2' }, { label: '泡妞', value: '3' }, { label: '吃美食', value: '4' }] },
                    // { field: 'remark', label: '备注', type: '$textarea', span: 24},
                    { 
                        align: 'right',
                        span: 24, 
                        type: '$buttons',
                        children: [
                            //type按相应类别传入如下值 按规定传 
                            {type: 'del', content: '删除', status: 'primary', size:"mini", disabled:true},
                            {type: 'colsConfig', content: '列配置', status: 'primary', handler: 'searchFn', size:"mini"},
                            {type: 'del', content: '删除', status: 'primary', size:"mini"},
                            {type: 'save', content: '保存', status: 'primary', size:"mini"},
                            {type: 'add', content: '新增', status: 'primary', size:"mini"},
                            {type: 'reset', content: '重置', status: 'primary', size:"mini"},
                            {type: 'search', content: '查询', status: 'primary', size:"mini"}
                        ] 
                    }
                ],
                //时间空间范围控制
                pickerOptionConfig: {
                    pickerOptions: {
                        disabledDate(time) {
                            return time.getTime() > Date.now();
                        },
                    },
                    pickerOptionstwo: {
                        disabledDate(time) {
                            return time.getTime() > Date.now();
                        },
                    }
                },
                // 搜索数据绑定
                queryData: {
                    name: '张三',
                    role: '',
                    sex: '',
                    age: '',
                    flag1: '',
                    single: true,
                    checkedList: ["线下主题活动"],
                    num: '',
                    date: '',
                    center: '',
                    remark: '',
                    pageNum: 1,
                    pageSize: 10,
                    delFlag: 0,
                    
                }
            },
           
            // 表格数据(上下布局)
            tableParams: {
                dragStateFlag:false,//是否拖拽表头
                tableRowClassName:this.tableRowClassNameColor,
                // 表格接口地址  详细地址在api配置
                // url:urlCommon.queryApi.url,
                // height:''
                apiName: '',//"queryApi"
                tableStyle: 1, //1--主子表格上下布局  2---主子表格左右布局
                // 风格主题
                // tooltip:"dark",
                // 表头数据
                columns:[
                    {prop: '', label: '', width: '60', align: 'center',type:"selection",fixed:'',isShow:true},
                    {prop: 'classificationStr', label: '商品分类', align: 'center',type:"",fixed:'',isShow:false},
                    {prop: 'level', label: '等级', align: 'center',type:"",fixed:'',formatter:this.formatter,isShow:true,isSortable:"custom"},
                    {prop: 'levelDesc', label: '审核结果', align: 'center',type:"",fixed:'',isShow:true}
                ],
                //新增行数据初始化
                rowDataJson: {
                    "classificationStr":"","commodityTypeId":"","level":'',"levelDesc":""
                },
                // 校验规则
                rules:{},
                // 表格数据
                tableData: [
                    {id:1,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护口罩","commodityTypeId":"10000","level":1,"levelDesc":"可以上"},
                    {id:2,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 一次性口罩","commodityTypeId":"10001","level":1,"levelDesc":"可以上"},
                    {id:3,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护面具及配件","commodityTypeId":"10002","level":1,"levelDesc":"可以上"},
                    {id:4,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":1,"levelDesc":"可以上"},
                    {id:5,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 一次性口罩","commodityTypeId":"10001","level":1,"levelDesc":"可以上"},
                    {id:6,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护面具及配件","commodityTypeId":"10002","level":1,"levelDesc":"可以上"},
                    {id:7,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":1,"levelDesc":"可以上"},
                    {id:8,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 一次性口罩","commodityTypeId":"10001","level":1,"levelDesc":"可以上"},
                    {id:9,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护面具及配件","commodityTypeId":"10002","level":1,"levelDesc":"可以上"},
                    {id:10,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":1,"levelDesc":"可以上"},
                    {id:4,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":1,"levelDesc":"可以上"},
                    {id:5,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 一次性口罩","commodityTypeId":"10001","level":1,"levelDesc":"可以上"},
                    {id:6,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护面具及配件","commodityTypeId":"10002","level":1,"levelDesc":"可以上"},
                    {id:7,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":1,"levelDesc":"可以上"},
                    {id:8,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 一次性口罩","commodityTypeId":"10001","level":1,"levelDesc":"可以上"},
                    {id:9,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护面具及配件","commodityTypeId":"10002","level":1,"levelDesc":"可以上"},
                    {id:10,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":1,"levelDesc":"可以上"},
                    
                ],
                //主表主键  主子表的时候必填
                id: "id",
                // 分页
                pageSizeOpt: ['10','20','50','100','200'],
                pageNum:1,
                pageSize:10,
                // 表格高度最大值
                maxHeight:300, //上下布局主子表250 单表450
            },
            // //type 主表type:add save del   子表type:childAdd childSave childDel
            buttonsChild: {
                align: 'right',
                buttons:[
                    {type: 'childSave', content: '保存', status: 'primary', size:"mini"},
                    {type: 'childAdd', content: '新增', status: 'primary', size:"mini"},
                    {type: 'childDel', content: '删除', status: 'primary', size:"mini"}
                ]
            },
            //子表格数据
            childTableParams: {
                dragStateFlag:false,//是否拖拽表头
                tableRowClassName:this.tableRowClassNameColor,
                // 校验规则
                rules:{},
                // 表格接口地址  详细地址在api配置
                // url:urlCommon.queryApi.url,
                isShowChild: true, //主子表子表中必填项  首次不加载为true
                apiName: '',//"queryApi"
                // 风格主题
                tooltip:"dark",
                rules:{},
                // 表头数据
                columns:[
                    {prop: '', label: '', width: '60', align: 'center',type:"selection",fixed:""},
                    {prop: 'name', label: '姓名', align: 'center',type:"input",fixed:""},
                    {prop: 'date', label: '时间', align: 'center',type:"date",fixed:"",formatter:this.formatter},
                    {prop: 'address', label: '地址', align: 'center',type:"input",fixed:""},
                    {prop: 'created', label: '创建时间', align: 'center',type:"",fixed:""}
                ],
                //新增行数据初始化
                rowDataJson: {
                    date:"",name:"",address:""
                },
                // 表格数据
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                },
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                },
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }
                ],
                // 分页
                pageSizeOpt: ['10','20','50','100','200'],
                pageNum:1,
                pageSize:10,
                // 表格高度最大值
                maxHeight:250,
            },
        }
    },
    methods: {
        lookHandle(row) {
            console.log(row)
        },
        //表格新增/删除/修改后的数据保存操作
        saveHandler(data) {
            // console.log(data)
            console.log("这里写保存的逻辑----保存成功")
        },
        delHandler$before(data) {
            console.log('这里写删除前的逻辑')
        },
        delHandler$after(data) {
            console.log('这里写删除后的逻辑')
        },
        childSaveHandler(data) {
            console.log("这里写子表保存的逻辑----保存成功")
        },
        childDelHandler$before(data) {
            console.log('这里写子表删除前的逻辑')
        },
        childDelHandler$after(data) {
            console.log('这里写子表删除后的逻辑')
        },
        formCommHandler(){
            
        },
        // 在这里设置行颜色
        tableRowClassNameColor({row,rowIndex}){

        }
    },
    mounted(){
        // console.log(urlCommon.queryApi.url)
    }
}
</script>
<style scoped lang>
    .elWrapper{
        width:100%;
        padding:10px 20px;
        box-sizing:border-box;
    }
</style>


